<template>
  <div>
    <div>
      <HeadTail></HeadTail>
    </div>
    <div class="w-4/5 m-auto mt-[100px] xl:text-[30px]">
      <div><p>商家名称：川式凉菜</p></div>
      <div class="flex">
        <img src="https://i.postimg.cc/XqZhyjZ2/2.png" alt="" class="w-1/5" />
        <div class="w-4/5">
          <p>商家名称：凉拌脆皮毛肚</p>
          <p class="mt-[2%]">打包费<span class="ml-[70%]">￥3.00</span></p>
          <p class="mt-[2%]">配送费<span class="ml-[70%]">￥15.00</span></p>
        </div>
      </div>
      <div>
        <p>订单编号：1433223</p>
        <p>配送地址：川科院西区一栋1-11</p>
        <p>下单时间：2023/05/09</p>
        <p>共计：￥18.00</p>
      </div>
      <div class="text-center xl:mt-[30px]">
        <button class="bg-[#fdc14b] px-5 py-1 rounded-lg">返回订单</button>
      </div>
    </div>
  </div>
</template>
<script>
import HeadTail from "./HeadTail.vue";
import { reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {
    HeadTail,
  },
  setup() {
    let orderData = reactive([
      {
        title: "凉拌脆皮毛肚",
        img: "https://i.postimg.cc/XqZhyjZ2/2.png",
        shopname: "川式凉菜馆",
        ordertime: "2023/05/09",
        orderid: "1433223",
        price: 105.0,
        Pickupcode: 1,
      },
      {
        title: "铁板牛排",
        img: "https://i.postimg.cc/5t41ZJzy/2.png",
        shopname: "中式西餐厅",
        ordertime: "2023/05/09",
        orderid: "1433224",
        price: 110.0,
        Pickupcode: 2,
      },
    ]);
    let newdatatails = reactive([]);
    return {
      orderData,
      newdatatails,
    };
  },
};
</script>
